<template>
	<view class="myData">
		<view class="box disFlex scale-1px-bottom">
			<view class="word">用户头像</view>
			<image  :src="user.headimgurl" mode=""></image>
		</view>
		<view class="box disFlex scale-1px-bottom">
			<view class="word">用户昵称</view>
			<input type="text" :value="user.nickname" disabled />
		</view>
		
		<view class="box disFlex scale-1px-bottom">
			<view class="word">绑定手机</view>
			<input  type="text" :value="user.phone" disabled />
		</view>
		<view class="box disFlex scale-1px-bottom">
			<view class="word">性别</view>
			<view class="cont">
				{{user.sex==0?'女':'男'}}
				<!-- {{datas.sex==0?'未知':datas.sex ==1?'男生':'女生'}} -->
			</view>
		</view>
		<view class="box disFlex scale-1px-bottom">
			<view class="word">地区</view>
			<view class="cont">{{city}}</view>
		</view>
		
		<view class="box disFlex scale-1px-bottom">
			<view class="word">生日</view>
			<view class="cont">{{user.birthday||' '}}</view>
		</view>
		
		<view class="bottom">
			<view class="box" @tap="eidt">编辑</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				user:'',
				citydata:'',
				city:''
			}	
		},
		onLoad(option) {
			this.getcity()
			const user = JSON.parse(decodeURIComponent(option.user));
			console.log(user)
			this.user=user;
			this.citys()
		},
		methods: {
			getcity(){
				this.citydata = uni.getStorageSync('citydata')
				console.log(this.citydata)
			},
			eidt(){
				uni.navigateTo({
					url:`/pages/mine/myData/updateMyData?user=${encodeURIComponent(JSON.stringify(this.user))}`
				})
			},
			citys(){
				this.citydata.forEach((v)=>{
					console.log(v)
					if(this.user.city_id==v.id){
						console.log(v.shortname )
						this.city=v.shortname
					}
				})
			}
		},
		
	}
</script>

<style lang="less">
	.myData{
		padding: 0 32rpx;
		padding-bottom: 120rpx;
		.box{
			padding: 32rpx 0;
			.word{
				color: #333;
				font-size: 32rpx;
			}
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			input{
				width: 60%;
				text-align: right;
			}
			.sex{
				display: flex;
				align-items: center;
				.iconfont{
					margin-top: 2px;
				}
			}
			.cont{
				color: #999;
				font-size: 30rpx;
			}
			textarea{
				flex: 1;
				height: 300rpx;
				padding-left:60rpx;
			}
		}
		.bottom{
			width: 100%;
			margin-top: 80rpx;
			.box{
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background:#2291FF;
				font-size:36rpx;
				color:rgba(255,255,255,1);
				border-radius:5px;
			}
		}
	}
</style>
